<template>
    <div>
       <table class="table">
          <tbody>
            <tr>
             <td>食谱标题</td>
             <td><input type="text" v-model="date.userName"></td>
          </tr>
          <tr>
             <td>菜谱封面</td>
             <td>
                <input type="file" @change="Postimg">
                <img :src="'https://localhost:7081/'+date.userImg" style="width: 60px;height: 60px;">
             </td>
          </tr>
          <tr>
             <td>分类</td>
             <td>
                <select v-model="date.hoteId">
                <option value="0">请选择</option>
                <option v-for="a in datas":value="a.hoteId">{{a.hoteName}}</option>
                </select>
             </td>
          </tr>
          <tr>
             <td>标签</td>
             <td><input type="text" v-model="date.userBao"></td>
          </tr>
          <tr>
             <td>分享</td>
             <td><input type="text" v-model="date.userFen"></td>
          </tr>
          <tr>
             <td>收藏</td>
             <td><input type="text" v-model="date.userSho"></td>
          </tr>
          <tr>
             <td>更新人</td>
             <td><input type="text" v-model="date.userGeng"></td>
          </tr>
          <tr>
             <td>状态</td>
             <td>
               <input type="radio" value="1" name="target" v-model="date.userStart">已发布
               <input type="radio" value="2" name="target" v-model="date.userStart">未发布
             </td>
          </tr>
          <tr>
             <td></td>
             <td><input type="button" value="添加" @click="postdata"></td>
          </tr>
          </tbody>
       </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref , onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

onMounted(()=>{
    xia();
})

const date = ref(
    {
  "userId": 0,
  "hoteId": 0,
  "userName": "",
  "userBao": "",
  "userFen": "",
  "userSho": "",
  "userStart": "",
  "userGeng": "",
  "userImg": "",
  "userTime": "2025-07-14T07:09:48.677Z"
}
)

const datas = ref([{
    "hoteId": 1,
    "hoteName": "午餐"
  },])

  const xia=()=>{
    axios.get("/api/Hote/Show").then(res=>{
        datas.value = res.data;
    })
}

const postdata=()=>{
   if(date.value.userName==""){
   alert("食谱标题不能为空")
   return
   }
   if(date.value.userImg==""){
   alert("菜谱封面不能为空")
   return
   }
   if(date.value.userBao==""){
   alert("标签不能为空")
   return
   }
   if(date.value.hoteId==0){
   alert("分类不能为空")
   return
   }
   if(date.value.userFen==""){
   alert("分享不能为空")
   return
   }
   if(date.value.userSho==""){
   alert("收藏不能为空")
   return
   }
   if(date.value.userGeng==""){
   alert("更新人不能为空")
   return
   }
    axios.post("/api/User/AddAsync",date.value).then(res=>{
        if(res.data>0){
        alert("添加成功")
        router.push("/List");
        }
        else{
        alert("添加失败")
        }
    })
}

const Postimg=(val:any)=>{
   var f = val.target.files[0];
   var fd = new FormData();
   fd.append("file",f);

   axios.post("/api/User/PostImg",fd).then(res=>{
      date.value.userImg = res.data;
   })
}

</script>

<style scoped>

</style>